@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Repositories</div>

                <div class="card-body">
                    <table class="ui orange striped table">
                      <thead>
                        <tr><th>Name</th>
                        <th>Category</th>
                        <th>Type</th>
                        <th>Online</th>
                      </tr></thead>
                      <tbody>
                         @foreach($repositories as $repo)
                            <tr>
                              <td>{{$repo->name}}</td>
                              <td>{{$repo->category}}</td>
                              <td>{{$repo->type}}</td>
                              <td class="collapsing">
                                <div class="ui fitted slider checkbox" >
                                  <input type="checkbox" class="repo-status" data-repo="{{$repo->name}}"> <label></label>
                                </div>
                              </td>
                            </tr>
                        @endforeach
                      </tbody>
                      <tfoot class="full-width">
                        <tr>
                          <th></th>
                          <th colspan="4">
                            <a class="ui right floated small primary labeled icon button" href="{{ url('/dashboard/repository/add') }}">
                              <i class="plus icon"></i> Add repository
                            </a>
                          </th>
                        </tr>
                      </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $('.checkbox > .repo-status').click((e) =>{
      var i = $(e.target)
      axios.post('repository/'+i.attr('data-repo') + '/edit', {
        offline: !i.is(':disabled')
      }).then(res => {
        if(res.status == 200){
          $.notify({
            message: 'Status updated.'
          })
        }
      })
    })
  })
</script>
@endsection
